webwags Posted August 6, 2013 Share Posted August 6, 2013 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; } Link to comment Share on other sites More sharing options...
leev18 Posted August 6, 2013 Share Posted August 6, 2013 (edited) 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 Link to comment Share on other sites More sharing options...
davej Posted August 10, 2013 Share Posted August 10, 2013 (edited) 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 Link to comment Share on other sites More sharing options...
webwags Posted August 20, 2013 Author Share Posted August 20, 2013 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! Link to comment Share on other sites More sharing options...
davej Posted August 21, 2013 Share Posted August 21, 2013 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> Link to comment Share on other sites More sharing options...
davej Posted August 21, 2013 Share Posted August 21, 2013 (edited) ??? Edited August 21, 2013 by davej Link to comment Share on other sites More sharing options...
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now