个人中心
gpt4 book ai didi

css - 如何更改子菜单方向(水平到垂直)

转载 作者：太空宇宙 更新时间：2023-11-03 18:46:26 24 4
gpt4 key购买 nike

我创建了一个水平菜单，其中一个链接上有一个水平子菜单。我现在正在做网站的人希望子菜单垂直移动。我无法弄清楚我需要更改哪些 CSS 代码才能使子菜单从父链接下拉。代码如下，供您阅读。

网址是island-timber.com在产品父链接上。

在此先感谢您的帮助。

这是导航的修改后的 CSS:

#top_nav    {

        width: 1050px;
        height: 66px;
        margin-left: 106px;
        z-index: 10;

}

#top_nav ul   {

        list-style: none;
        padding: 0px;
        margin-left: auto;
        margin-right: auto;
        width: 780px;
        position: relative;
        display: inline-table;

}

#top_nav li    {

        float: left;

}

#top_nav li a    {

        font: 20px Stencil;
        color: #FF0;
        font-weight: normal;
        text-decoration: none;
        text-align: center;
        display: block;
        float: left;
        width: 154px;
        height: 61px;
        line-height: 54px;

}

#top_nav li a:hover,  #top_nav li .active    {

        background: url(../images/active.png) center;

}

#top_nav li ul {

        display: none;
        position: absolute; 
        top: 100%; 
        width: 154px;

}

#top_nav li:hover > ul {

        display: block; /*block*/

}

#top_nav li ul li {

        float: none;
        position: relative;

}

#top_nav li ul a    {

        font: 12px Verdana, Geneva, sans-serif;
        padding-top: 12px;
        height: 30px;
        background-color: #FFF;
        color: #000;

}

And the amended CSS for the #prew_img tag:

#prew_img   {

        height: 297px;
        z-index: 5;

}

这是 HTML:

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"       "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <meta http-equiv="content-type" content="text/html; charset=utf-8" />
        <title>Island Timber &amp; Building Supplies | Home</title>
        <meta name="keywords" content="" />
        <meta name="description" content="" />
        <link href="stylesheets/itbm_styles.css" rel="stylesheet" type="text/css" media="screen" />
    </head>
    <body>
        <div id="container">
            <div id="top_nav">
                  <ul>
        <li><a href="index.html" class="active">Home</a></li>

        <li><a href="">Products</a>

            <ul>
                <li><a href="paintshop.html">Paintshop</a></li>
                <li><a href="timber.html">Timber</a></li>
                <li><a href="buildingins.html">Building Materials &amp; Insulation</a></li>
                <li><a href="adhesivesfix.html">Adhesives &amp; Fixings</a></li>
                <li><a href="toolscloth.html">Tools &amp; Clothing</a></li>
            </ul>

        </li>

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

        <li><a href="offers.html">Offers</a></li>

        <li><a href="contact.html">Contact Us</a></li>
    </ul> 
    </div>
                                <div id="top_padding">          </div>

                                <div id="prew_img">

                   <ul class="round">
            <li><img src="images/paintshop_scroll_border.jpg" alt="Island Timber Johnstones paint shop" /></li>
            <li><img src="images/timberyard_scroll_border.jpg" alt="Island Timber Yard" /></li>
            <li><img src="images/shop_scroll_border.jpg" alt="Island Timber shop" /></li>
            <li><img src="images/wagon_scroll_border.jpg" alt="Island Timber delivery wagon" /></li>
            <li><img src="images/tools_scroll_border.jpg" alt="Island Timber tools section" /></li>
            <li><img src="images/adhesives_scroll_border.jpg" alt="Island Timber adhesives section" /></li>
</ul>
<script type="text/javascript" src="javascript/jquery.js"></script>
<script type="text/javascript" src="javascript/jquery.roundabout.js"></script>
<script type="text/javascript">

            $(document).ready(function() {
                $('.round').roundabout();
            });

        </script>

        <div id="middle_padding"></div>
<div id="content_container">
    <div id="main_content">     
            <div id="overview"> 
                <h3>HOME</h3>
                <p>Established in 1998, Island &amp; Timber Building Materials Ltd, based in Ballasalla, Isle of Man, have been fulfilling the needs of both the professional trade and the keen DIYer ever since.  Our site carries a broad range of products which are in stock and available immediately for collection or delivery.</p><br />
                <p>We are members of the National Merchant Buying Society and have access to a wide range of suppliers so we can ensure we are providing excellent quality products at the best prices possible.</p><br />
                <p>We run a reliable delivery service and orders placed before 1:00pm are delivered next day. We offer cash on delivery and telephone payments for our non account customers and our fleet of specialist vehicles can cater for all delivery requirements.</p><br />
                <p>In our sawmill we have experienced staff to cut timber and sheet materials to your specifications.</p><br />
                <p>We pride ourselves on our excellent customer service, from enquiry through to delivery and our knowledgable team are always on hand to help and advise you, our valued customers.</p><br />
                <p>Please enjoy browsing our website, here you will see a fraction of the types of products we hold in stock, if you don't see what you are looking for please ask a member of the team, via our <a href="contact.html"> Contact page </a> or call us on 01624 827 338, and we will endeavour to source the product at the best price possible for you.</p>
            </div>
        </div>  
            <div id="right_col">    
            <div id="suppliers">    
            <h3>Some of our suppliers</h3>
            <div class="supplier_pic_line"> 
                <img src="images/everbuild_logo.jpg" alt="Ever Build logo" />
                <img src="images/faithfull_logo.jpg" alt="Faithfull Tools logo" />
            </div>
            <div class="supplier_pic_line"> 
                <img src="images/knauf_insulation_logo.jpg" alt="Knauf Insulation logo" />
                <img src="images/marshalltown_logo.jpg" alt="Marshalltown logo" />
            </div>  
            <div class="supplier_pic_line"> 
            <img src="images/johnstones_logo.jpg" alt="Johnstones Paints logo" />
            <img src="images/olympic_fixings_logo.jpg" alt="Olympic Fixings logo"  />
            </div>  
            <div class="supplier_pic_line"> 
            <img src="images/stanley_logo.jpg" alt="Stanley Tools logo" />
            <img src="images/irwin_logo.jpg" alt="Irwin Tools logo" />
            </div>  
            </div>  
            <div id="opening_times">
            <h3>Opening Times</h3>
            <p class="opening_times">Mon - Thurs - 7:30am to 5:00pm</p>
            <p class="opening_times">Friday - 7:30am to 4:30pm</p>
            <p class="opening_times">Saturday - 7:30am to 12:00pm</p>
            <p class="opening_times">Sunday - Closed</p>
            <br />
            <p class="opening_times">Tel: (01624) 827338</p>
            </div>  
            </div>
            </div>



    </div>          


</div>
    </body>
</html>

最佳答案

改变这个:

#top_nav li ul {

    position: absolute; top: 100%;;
}

进入这个:

#top_nav li ul {

    position: absolute; top: 100%; width:200px;
}

这应该可以解决您的问题干杯，马可

编辑

#top_nav    {
          width: 1050px;
          height: 66px;
          margin-left: 106px;
}
#top_nav ul   {
        padding-left: 0px;
        list-style: none;
        padding: 0px 0px 0px 0px;
        margin-left: auto;
        margin-right: auto;
        width: 780px;
        position: relative;
        display: inline-table;
            z-index: 1010;
}
#top_nav ul li    { 
        float: left;
}
#top_nav ul li a    { 
        font: 20px Stencil;
        color: #FF0;
        font-weight: normal;
        text-decoration: none;
        text-align: center;
        display: block;
        float: left;
        width: 154px;
        height: 61px;
        line-height: 54px;
}
 #top_nav ul li a:hover,  #top_nav li .active    {
        background: url(../images/active.png) center;
}
#top_nav ul li ul {
        display: none;
        position: absolute; top: 100%; width: 200px;
}
#top_nav ul li:hover > ul {
        display: block; /*block*/
}
#top_nav ul li ul li {
        float: none;
        position: relative;
        background-color:red !important;
}
#top_nav ul li ul li a:active{
            background: url(images/active.png) center;
}
#top_nav ul li ul li a:hover{
            background-color:red;
}
#top_nav ul li ul a {
        font: 12px Verdana, Geneva, sans-serif;
        padding-top: 12px;
        height: 30px;
            background-color: #FFF;
        color: #000;
}

关于css - 如何更改子菜单方向(水平到垂直)，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/16274223/

24 4 0
文章推荐： python - 查询 SQLAlchemy 0.7.10 中的所有结果
文章推荐： c# - Func<> 和原始代码
文章推荐： python - python中一致的读写文件
文章推荐： c#不想触发事件
太空宇宙
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com