如何对齐水平导航菜单下方的按钮？

时间：2014-05-18 08:27:00

标签： html css

如何对齐水平导航菜单下方居中的按钮？ 我不想将菜单列表项与按钮重叠，按钮应该间隔开，并在菜单展开时相应放置。

<!DOCTYPE html>

<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<title>Welcome</title>
<style type="text/css">
    * {
    margin:0px;
    padding:0px;
}

body {
    background-color:#f7f0f0;
    font-family:Verdana;
    padding:50px;   /*all four paddings are 50px*/
}

h1 {
    text-align:center;
    border-bottom:2px solid #666;
    padding-bottom:10px;
}

ul#mainmenu,ul.sub1,ul.sub2,ul.sub3,ul.sub4,ul.sub5 {
    list-style-type:none;
    font-size:15px;
}

ul#mainmenu {
    padding-top:10px;
}

ul#mainmenu li{
    float:left;
    position:relative;
    width:350px;
    text-align:center;
    margin-right:3px;   /*renders a right margin of 5 pixels around the list items */
}

ul#mainmenu a {
    text-decoration:none;
    display:block;
    line-height:25px;   /*gives a vertical centering*/
    width:350px;    /*same as the width of the list items*/
    height:25px;
    background:linear-gradient(to right,#bdc2ed,white,#bdc2ed); /*create a color gradient to the right*/
    border-radius:5px;
    /*outline:1px solid red;*/  /*takes up the space outside of the elements's container (i.e. in this case the outside of the list items*/
}

ul#mainmenu .sub1 li {
    margin-top:2px;
}

ul#mainmenu .sub1 a {
    border:1px solid green; /*takes up the space outside of the content itself i.e. the anchor tags . That's where the border radius comes into the picture*/
}

ul#mainmenu .sub2 li,.sub3 li,.sub4 li,.sub5 li {
    margin-left:20px;
}

ul#mainmenu li:hover > a {
    text-transform:uppercase; /*select and style every <a> element where the the par */
    background:linear-gradient(to right,blue,white,blue);
    border:1px solid black;
}

ul#mainmenu li:hover a:hover {
    background:linear-gradient(to right,#718ce5,white,#718ce5);
}

ul#mainmenu ul.sub1 {
    display:none;
    position:absolute;
    top:26px;
    left:0px;
}

ul#mainmenu ul.sub2 {
    display:none;
    position:absolute;
    top:-2px;
    left:335px;
}

ul#mainmenu ul.sub3 {
    display:none;
    position:absolute;
    top:-2px;
    left:335px;
}

ul#mainmenu ul.sub4 {
    display:none;
    position:absolute;
    top:-2px;
    left:335px;
}

ul#mainmenu ul.sub5 {
    display:none;
    position:absolute;
    top:-2px;
    left:335px;
}

ul#mainmenu li:hover ul.sub1 
{
    display:block;
}

ul#mainmenu ul.sub1 li:hover ul.sub2
{
    display:block;
}

ul#mainmenu ul.sub2 li:hover ul.sub3
{
    display:block;
}

ul#mainmenu ul.sub2  li#submenu_shirts:hover ul.sub4
{
    display:block;
}

ul#mainmenu ul.sub1 li#submenu_shoes:hover ul.sub5
{
    display:block;
}
</style>

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js">
</script>
<script type="text/javascript">
    $(document).ready(function () {

        $("button").click(function () {
            $("ul#mainmenu li:first").hide(500);
        });
    });
</script>
</head>
<body>

<h1>Welcome</h1>
<div>
<form action="" >
<ul id="mainmenu">
<li><a href="#">Home</a></li>

<li><a href="#">Products</a>
    <ul class="sub1">
        <li><a href="#">Clothing</a>
            <ul class="sub2">
                <li><a href="#">T-Shirts</a>
                    <ul class="sub3">
                            <li><a href="#">Polo</a></li>
                            <li><a href="#">V-Neck</a></li>
                            <li><a href="#">Henley</a></li>
                    </ul>
                </li>
                <li id="submenu_shirts"><a href="#">Shirts</a>
                    <ul class="sub4">
                            <li><a href="#">Half-Sleeve</a></li>
                            <li><a href="#">Full-Sleeve</a></li>
                    </ul>
                </li>
                <li><a href="#">Jeans</a></li>
                <li><a href="#">Trousers</a></li>
            </ul>
        </li>
        <li id="submenu_shoes"><a href="#">Shoes</a>
            <ul class="sub5">
                <li><a href="#">Sports-Shoes</a></li>
                <li><a href="#">Formal-Shoes</a></li> 
            </ul>
        </li>
        <li><a href="#">Accessories</a></li>
    </ul>
</li>

<li><a href="#">Contact Us</a></li>
</ul>
</form>
</div>

<div>
<input type="submit" value="Post"/>
</div>


</body>
</html>

3 个答案:

答案 0 :(得分：1)

查看此jsFiddle。

我的解决方案使用jQuery。我使用悬停选择器和切换。我也把菜单集中在一起（不确定你是否想要它〜如果没有，取消注释float：left为无序列表）。它通常会按下输入按钮，但问题是嵌入的无序列表具有所有列表项的绝对位置。这将覆盖按钮输入，该按钮输入具有相对位置。所以我只是考虑了悬停产品列表项上按钮的位置，因为这是唯一一个似乎导致问题的位置。因此，此解决方案应仅用于上面列出的问题。

$("li.products").hover(function(){
    $( ".btn" ).css( "top", "60px" );
}, function(){
    $( ".btn" ).css( "top", "0px" );
});

用于悬停jQuery选择器的其他好资源：

1。）jQuery API文档 - http://api.jquery.com/hover/

2。）堆栈溢出问题 - toggle a css color on hover

答案 1 :(得分：0)

更改宽度值如下... 

ul#mainmenu li{
    width:250px;


ul#mainmenu a {
    width:250px;

REPLACE：

OLD：

<form action="" >
<ul id="mainmenu">

NEW：

<form action="" >
<ul id="mainmenu" style="width:800px; margin:0 auto;">

答案 2 :(得分：0)

    <!DOCTYPE html>

    <html lang="en" xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta charset="utf-8" />
    <title>Welcome</title>
    <style type="text/css">
        * {
        margin:0px;
        padding:0px;
    }

    body {
        background-color:#f7f0f0;
        font-family:Verdana;
        padding:50px;   /*all four paddings are 50px*/
    }

    h1 {
        text-align:center;
        border-bottom:2px solid #666;
        padding-bottom:10px;
    }

    ul#mainmenu,ul.sub1,ul.sub2,ul.sub3,ul.sub4,ul.sub5 {
        list-style-type:none;
        font-size:15px;
    }

    ul#mainmenu {
        padding-top:10px;
    }

    ul#mainmenu li{
        float:left;
        position:relative;
        width:250px;
        text-align:center;
        margin-right:3px;   /*renders a right margin of 5 pixels around the list items */
    }

    ul#mainmenu a {
        text-decoration:none;
        display:block;
        line-height:25px;   /*gives a vertical centering*/
        width:250px;    /*same as the width of the list items*/
        height:25px;
        background:linear-gradient(to right,#bdc2ed,white,#bdc2ed); /*create a color gradient to the right*/
        border-radius:5px;
        /*outline:1px solid red;*/  /*takes up the space outside of the elements's container (i.e. in this case the outside of the list items*/
    }

    ul#mainmenu .sub1 li {
        margin-top:2px;
    }

    ul#mainmenu .sub1 a {
        border:1px solid green; /*takes up the space outside of the content itself i.e. the anchor tags . That's where the border radius comes into the picture*/
    }

    ul#mainmenu .sub2 li,.sub3 li,.sub4 li,.sub5 li {
        margin-left:20px;
    }

    ul#mainmenu li:hover > a {
        text-transform:uppercase; /*select and style every <a> element where the the par */
        background:linear-gradient(to right,blue,white,blue);
        border:1px solid black;
    }

    ul#mainmenu li:hover a:hover {
        background:linear-gradient(to right,#718ce5,white,#718ce5);
    }

    ul#mainmenu ul.sub1 {
        display:none;
        position:absolute;
        top:26px;
        left:0px;
    }

    ul#mainmenu ul.sub2 {
        display:none;
        position:absolute;
        top:-2px;
        left:335px;
    }

    ul#mainmenu ul.sub3 {
        display:none;
        position:absolute;
        top:-2px;
        left:335px;
    }

    ul#mainmenu ul.sub4 {
        display:none;
        position:absolute;
        top:-2px;
        left:335px;
    }

    ul#mainmenu ul.sub5 {
        display:none;
        position:absolute;
        top:-2px;
        left:335px;
    }

    ul#mainmenu li:hover ul.sub1 
    {
        display:block;
    }

    ul#mainmenu ul.sub1 li:hover ul.sub2
    {
        display:block;
    }

    ul#mainmenu ul.sub2 li:hover ul.sub3
    {
        display:block;
    }

    ul#mainmenu ul.sub2  li#submenu_shirts:hover ul.sub4
    {
        display:block;
    }

    ul#mainmenu ul.sub1 li#submenu_shoes:hover ul.sub5
    {
        display:block;
    }

    .button {
        width:800px;
        margin:0 auto;
    }

    </style>

    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js">
    </script>
    <script type="text/javascript">
        $(document).ready(function () {

            $("button").click(function () {
                $("ul#mainmenu li:first").hide(500);
            });
        });
    </script>
    </head>
    <body>

    <h1>Welcome</h1>
    <div>
    <form action="" >
    <ul id="mainmenu" style="width:800px; margin:0 auto;">
    <li><a href="#">Home</a></li>

    <li><a href="#">Products</a>
        <ul class="sub1">
            <li><a href="#">Clothing</a>
                <ul class="sub2">
                    <li><a href="#">T-Shirts</a>
                        <ul class="sub3">
                                <li><a href="#">Polo</a></li>
                                <li><a href="#">V-Neck</a></li>
                                <li><a href="#">Henley</a></li>
                        </ul>
                    </li>
                    <li id="submenu_shirts"><a href="#">Shirts</a>
                        <ul class="sub4">
                                <li><a href="#">Half-Sleeve</a></li>
                                <li><a href="#">Full-Sleeve</a></li>
                        </ul>
                    </li>
                    <li><a href="#">Jeans</a></li>
                    <li><a href="#">Trousers</a></li>
                </ul>
            </li>
            <li id="submenu_shoes"><a href="#">Shoes</a>
                <ul class="sub5">
                    <li><a href="#">Sports-Shoes</a></li>
                    <li><a href="#">Formal-Shoes</a></li> 
                </ul>
            </li>
            <li><a href="#">Accessories</a></li>
        </ul>
    </li>

    <li><a href="#">Contact Us</a></li>
    </ul>
    </form>
</div>

<div>
<input type="submit" value="Post"/>
</div>


</body>
</html>
相关问题
最新问题