I found a drop down menu html code that I liked and personalized it to my liking in the html editor.
I seem to have switched a few things when I was trying to get the sub menus to appear in front of the blog posts and sidebar.
Anyway. I really really need help in fixing it!
-
When you hover over any of the menu items, the “Contact Us” link moves down below and I would like to it stay in place at the end of the menu.
-
For the sub-menus, I want to fix the sub menu links to stretch out all the way and not be under one another (such as “fab not drab fridays”) and I would like to be able to also make the purple border of the sub menus smaller so they aren’t taking up so much space.
I posted the link above so you could take a look at the site and get a better understanding of what I’m trying to explain.
Here also is the html code that I’m using for the entire drop down menu, in case that helps!
<style>
#nav {
margin: 230;
padding: 7px 8px 0;
background: #white url(http://1.bp.blogspot.com/-PsqSr0nealw/T6viT2k47uI/AAAAAAAABsM/NZ5el5wswqk/s1600/hb-gradient.png) repeat-x 0 -110px;
line-height: 100%;
border-radius: 2em;
-webkit-border-radius: 2em;
-moz-border-radius: 2em;
-webkit-box-shadow: 0 1px 3px rgba(0,0,0, .4);
-moz-box-shadow: 0 1px 3px rgba(0,0,0, .4);
width: 100%
}
#nav li {
margin: 0 5px;
padding: 0 0 8px;
float: left;
position: relative;
list-style: none;
font-family: news gothic std;
}
/* main level link */
#nav a {
font-weight: normal;
color: #00d6f6;
text-decoration: none;
display: block;
padding: 10px 70px;
margin: 0;
-webkit-border-radius: 1.6em;
-moz-border-radius: 1.6em;
text-shadow: 0 1px 1px rgba(0,0,0, .3);
}
#nav a:hover {
background: #white;
color: #98015d;
}
/* main level link hover */
#nav .current a, #nav li:hover > a {
background: white #98015durl(http://1.bp.blogspot.com/-PsqSr0nealw/T6viT2k47uI/AAAAAAAABsM/NZ5el5wswqk/s1600/hb-gradient.png) repeat-x 0 -40px;
color: #white;
border-top: solid 1px #white;
-webkit-box-shadow: 0 1px 1px rgba(0,0,0, .2);
-moz-box-shadow: 0 1px 1px rgba(0,0,0, .2);
box-shadow: 0 1px 1px rgba(0,0,0, .2);
text-shadow: 0 1px 0 rgba(255,255,255, 1);
}
/* sub levels link hover */
#nav ul li:hover a, #nav li:hover li a {
background: 98015d;
border: none;
color: #98015d;
-webkit-box-shadow: none;
-moz-box-shadow: none;
}
#nav ul a:hover {
background: #ff6c00 url(http://1.bp.blogspot.com/-PsqSr0nealw/T6viT2k47uI/AAAAAAAABsM/NZ5el5wswqk/s1600/hb-gradient.png) repeat-x 0 -100px !important;
color: #98015d !important;
-webkit-border-radius: 0;
-moz-border-radius: 0;
text-shadow: 0 1px 1px rgba(0,0,0, .1);
}
/* dropdown */
#nav li:hover > ul {
display: block;
}
/* level 2 list */
#nav ul {
display: none;
margin: 0;
padding: 10;
width: 260px;
position: static;
top: 250px;
left: 200;
background: #white url(http://1.bp.blogspot.com/-PsqSr0nealw/T6viT2k47uI/AAAAAAAABsM/NZ5el5wswqk/s1600/hb-gradient.png) repeat-x 0 0;
border: solid 1px #98015d;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
-webkit-box-shadow: 0 1px 3px rgba(0,0,0, .3);
-moz-box-shadow: 0 1px 3px rgba(0,0,0, .3);
box-shadow: 0 1px 3px rgba(0,0,0, .3);
}
#nav ul li {
float: none;
margin: 0;
padding: 10;
}
#nav ul a {
font-weight: normal;
text-shadow: 0 1px 0 #fff;
}
/* level 3+ list */
#nav ul ul {
left: 250px;
top: -90px;
}
/* rounded corners of first and last link */
#nav ul li:first-child > a {
-webkit-border-top-left-radius: 9px;
-moz-border-radius-topleft: 9px;
-webkit-border-top-right-radius: 9px;
-moz-border-radius-topright: 9px;
}
#nav ul li:last-child > a {
-webkit-border-bottom-left-radius: 9px;
-moz-border-radius-bottomleft: 9px;
-webkit-border-bottom-right-radius: 9px;
-moz-border-radius-bottomright: 9px;
}
/* clearfix */
#nav:after {
content: ".";
display: block;
clear: both;
visibility: hidden;
line-height: 0;
height: 0;
}
#nav {
display: inline-block;
}
html[xmlns] #nav {
display: block;
}
* html #nav {
height: 1%;
}
</style>
<ul id="nav">
<li>
<a href="http://www.blissful55.com/">Home</a>
</li>
<li>
<a href="#">About Us</a>
<ul>
<li>
<a href="#">Our Sisterly Story</a>
</li>
<li>
<a href="#">Meet Jen</a>
</li>
<li>
<a href="#">Meet Laryssa</a>
</li>
</ul>
</li>
<li>
<a href="#">Projects</a>
<ul>
<li>
<a href="#">Feeling Crafty</a>
</li>
<li>
<a href="#">Trash to Treasure</a>
</li>
<li>
<a href="#">Budget Friendly DIY</a>
</li>
<li>
<a href="#">Recipes</a>
</li>
<li>
<a href="#">Home Decor</a>
</li>
</ul>
</li>
<li>
<a href="#">Weekly Happenings</a>
<ul>
<li>
<a href="#">Fab Not Drab Fridays</a>
</li>
<li>
<a href="#">Work On You Wednesdays</a>
</li>
<li>
<a href="#">Where We Party</a>
</li>
</ul>
</li>
<li>
<a href="#">Contact Us</a>
<ul>
<li>
<a href="#">Advertising/Blog Swaps</a>
</li>
<li>
<a href="#">Get Featured!</a>
</li>
<li>
<a href="#">Want to Guest Post?</a>
</li>
</ul>
</li>
<li>
</li>
</ul>
Thanks so much to anyone that can help!!!
