Jump to content

webwags

Members
 View Profile  See their activity

  • Posts

    5

  • Joined

  • Last visited

 Content Type 

Posts posted by webwags

    width issue with submenu

    in CSS

    Posted

    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!

    width issue with submenu

    in CSS

    Posted

    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;
    }

     

    styling submenu

    in HTML/XHTML

    Posted

    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.

    styling submenu

    in HTML/XHTML

    Posted

    <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

×
×
  • Create New...