width issue with submenu

[webwags]

Hi there, I am having trouble understanding how to format the width of my submenu items in my nav bar. I have tried mulitple codes and am at a loss. Any suggestions?

 

<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="fireplacedoors.html">Fireplaces Doors</a></li>

<li><a href="inserts.html">Fireplaces Inserts</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>

#navbar_text a:link{

color: #bca380;

}

#navbar_text a:hover{

color: #dccfbd;

}

#navbar_text {

word-spacing: 15px;

}

#navbar_text li{

position: relative;

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;

position: absolute;

top: -9999em;

left: 0;

}

li:hover ul.submenu {

padding: 0;

margin: 0;

list-style: none;

line-height: 20px;

display: list-item;

font-size: 70%;

top: 20px;

}

 

[leev18]

Hope you don't mind a complete reform. Demo: http://jsfiddle.net/BnBFh/

 

HTML:

<div id="nav">    <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>                <li><a href="fireplace.html">Fireplaces & Accessories</a></li>                <li><a href="fireplacedoors.html">Fireplaces Doors</a></li>                <li><a href="inserts.html">Fireplaces Inserts</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>                <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></div><br class="clear" />

CSS:

.clear { margin: 0; padding: 0; clear: both; }#nav ul {    margin: 0;    padding: 0;    list-style: none;}#nav li {    float: left;    margin-right: 10px;    position: relative;    background-color: #663333;    font-size: 150%;    font-family: Georgia, "Times New Roman", Times, serif;}#nav li li {    width: 175px;    font-size: 75%;}#nav li:nth-child(3) li { /* targets "Product" using "nth-child(3)", which is the third li of #nav */    width: 225px;}#nav a {    padding: 5px 15px;    display: block;    color: #bca380;    text-decoration: none;}#nav li:hover > a {    color: #dccfbd;}#nav ul ul {    position: absolute;    visibility: hidden;    border-top: solid 1px transparent;}#nav li:hover > ul {    visibility: visible;}

Edited August 6, 2013 by leev18

[davej]

Hi there, I am having trouble understanding how to format the width of my submenu items in my nav bar. I have tried mulitple codes and am at a loss. Any suggestions?

 

The width of your submenu? Are you saying that you would like each item in the drop-down to have only an individually sized width? Or what?

Edited August 10, 2013 by davej

[webwags]

Yes, I seem to be totally confused with submenus these days. I would like the drop down to have the same width. Any suggestions so I can try to understand what I am not understanding! Lol!

[davej]

Well, didn't you start off with something like this?

<!DOCTYPE html><html lang="en"><head><meta charset="utf-8"><title>menu webwag</title><style>.clear { margin: 0; padding: 0; clear: both; }#nav {width: 600px;}#nav ul {	margin: 0;	padding: 0;	list-style: none;	background-color: #663333;}#nav li {	float: left;	/*margin-right: 10px;*/	position: relative;	background-color: #663333;	font-size: 150%;	font-family: Georgia, "Times New Roman", Times, serif;}#nav li li {	font-size: 75%;	/*height: 1.5em;*/        width: 100%;}#nav a {	padding: 5px 15px;	display: block;	color: #bca380;	text-decoration: none;}#nav li:hover > a {	color: orange;/*#dccfbd;*/        background-color:#502222;}#nav ul ul {	position: absolute;	visibility: hidden;	border-top: solid 1px transparent;}#nav li:hover > ul {	visibility: visible;}</style></head><body><div id="nav">  <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>        <li><a href="fireplace.html">Fireplaces & Accessories</a></li>        <li><a href="fireplacedoors.html">Fireplaces Doors</a></li>        <li><a href="inserts.html">Fireplaces Inserts</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>        <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></div><br class="clear" /></body></html>

[davej]

???

Edited August 21, 2013 by davej