styling submenu

[webwags]

<div id="navbar">

<nav id="navbar_text">

<ul>

<li><a href="index.html">Home</a></li>

<li><a href="aboutus.html">About</a></li>

<li><a href="products.html">Products</a>

<ul class="submenu">

<li><a href="fireplace.html">Fireplaces & Accessories</a></li>

<li><a href="stoves.html">Stoves</a></li>

<li><a href="outdoorkitchens.html">Outdoor Kitchens</a></li>

<li><a href="gasgrills.html">Gas Grills</a></li>

</ul>

</li>

<li><a href="services.html">Services</a>

<ul class="submenu">

<li><a href="chimney_services.html">Chimney Services</a></li>

<li><a href="gas_services.html">Gas Services</a></li>

<li><a href="custom_design.html">Custom Design</a></li>

</ul>

</li>

</ul>

</nav>

</div> <!--END navbar-->

#navbar_text a:link{

color: #bca380;

}

#navbar_text a:hover{

color: #dccfbd;

}

#navbar_text {

word-spacing: 15px;

}

#navbar_text li{

display:inline;

}

#navbar_text ul li a {

display:inline;

padding: 5px;

background: #663333;

margin-top: 5px;

font-family:Georgia, "Times New Roman", Times, serif;

font-size: 150%;

color: #bca380;

text-decoration: none;

}

ul.submenu {

display: none;

}

li:hover ul.submenu {

padding: 0;

margin: 0;

list-style: none;

line-height: 25px;

display: list-item;

width: 100px;

font-size: 70%

}

#sidebar ul li a {

display: block;

padding: 10px 10px 10px 15px;

background: #cab69a;

-webkit-border-radius: 8px 0px 0px 8px;

border-radius: 8px 0px 0px 8px;

margin-top: 10px;

font-family:Georgia, "Times New Roman", Times, serif;

font-size: 120%;

font-weight: bold;

color: #663333;

text-decoration: none;

-webkit-box-shadow: 4px 4px 5px rgba(181, 154, 115, 0.75);

-moz-box-shadow: 4px 4px 5px rgba(181, 154, 115, 0.75);

box-shadow: 4px 4px 5px rgba(181, 154, 115, 0.75);

}

nav ul {

list-style:none;

}

#navbar {

background: #663333;

height: 35px;

width: 940px;

padding: 10px 0px 0px 20px;

}

 

submenu test.html

submenu test.css

[webwags]

I am trying to style my submenu. Having trouble getting the submenu links to stay under the correct main heading. Any help would be greatly appreciated. I am very new to this, so please forgive my elementary quesiton. Thankyou.

[newseed]

You need to set your parent li to have position: relative and then set your submenu ul to use position: absolute. Add a negative value for top and left position to place it well off the screen (hide it) - top: -9999em will work fine. When you hover over the menu you will need to adjust the top positioning of that submenu ul so that it now positions where you want it.

 

#navbar_text li{

position: relative;

}

 

ul.submenu {

position: absolute;

top: -9999em;

left: 0;

}

li:hover ul.submenu

{ top: 30px;}

Adjust to suite

Edited August 6, 2013 by newseed

[webwags]

thank you, I understand the theory behind this and applied it and it worked great. One problem though, I am unable to select the links under the submenu. What am I missing?

[wanna_be_webmaster]

Are you using FireFox or Explorer?

I have learned that this has many problems within itself when it comes to coding and websites.

Edited August 15, 2013 by wanna_be_webmaster

[davej]

The OP has started two threads on the same topic...

 

http://w3schools.invisionzone.com/index.php?showtopic=48225#entry267069