改变溺水位置

时间：2015-11-24 12:19:52

标签： html css razor umbraco

我已经制作了一个导航菜单，但我希望它的下拉菜单固定如下：

http://jsfiddle.net/Pnn6V/380/

在该示例中，无论悬停哪个菜单，下拉列表始终固定在同一位置。

我想在导航菜单上显示相同的下拉菜单。

这是我的代码：

@inherits Umbraco.Web.Macros.PartialViewMacroPage
@{

    var rootNode = Model.Content.AncestorOrSelf(1);

    // home node is hardcoded - this might not be right?
    <ul id="menu">
        <li>
            <a href="/" class="drop">Home</a>
            <div class="dropdown_2columns">
                <!-- Begin 2 columns container -->
                <div class="col_2">
                    <h2>Welcome !</h2>
                </div>
            </div><!-- End 2 columns container -->
        </li><!-- End Home Item -->
        @foreach (var mainNode in rootNode.Children())
        {
            int childCount = 1;
            int numChildren = mainNode.Children().Count();
            <li>
                <a href="@mainNode.Url" class="drop">@mainNode.Name</a>
                <div class="dropdown_5columns">
                    <!-- Begin 2 columns container -->
                    <div class="col_5">
                        <h2>@mainNode.Name</h2>
                    </div>
                    @* note if you want ALL descendants change .Children to .Descendats*@
                    @foreach (var childNode in mainNode.Children())
                    {
                        // if first node or new set of three open the div and ul @: is used to stop razor trying to
                        // "balance" the tags
                        if (childCount == 1 || (double)childCount % 3 == 1)
                        {
                            @:<div class="col_1">
                                @:<ul>
                        }
                        <a href="@childNode.Url">@childNode.Name</a>

                        // close the div and list if this is either a multiple of 3 or the last one
                        if ((double)childCount % 3 == 0 || numChildren == childCount)
                        {
                            @:</ul>
                        @:</div>
                        }
                        childCount++;
                    }
                </div>
            </li>
        }
    </ul>
}

的CSS： 

#menu {  
    list-style:none;  
    width:940px;  
    padding:0;
    margin:30px auto 0px auto;  
    height:43px;  
   /* padding:0px 20px 0px 20px;*/  

    /* Rounded Corners */  

    -moz-border-radius: 10px;  
    -webkit-border-radius: 10px;  
    border-radius: 10px;  

    /* Background color and gradients */  

    background: #014464;  
    background: -moz-linear-gradient(top, #0272a7, #013953);  
    background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#0272a7), to(#013953));  

    /* Borders */  

    border: 1px solid #002232;  

    -moz-box-shadow:inset 0px 0px 1px #edf9ff;  
    -webkit-box-shadow:inset 0px 0px 1px #edf9ff;  
    box-shadow:inset 0px 0px 1px #edf9ff;  
}  

#menu li {  
    float:left;  
    text-align:center;  
    position:relative;  
    padding: 4px 10px 4px 10px;  
    margin-right:30px;  
    margin-top:7px;  
    border:none;  
}  

#menu li:hover {  
    border: 1px solid #777777;  
    padding: 4px 9px 4px 9px;  

    /* Background color and gradients */  

    background: #F4F4F4;  
    background: -moz-linear-gradient(top, #F4F4F4, #EEEEEE);  
    background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#F4F4F4), to(#EEEEEE));  

    /* Rounded corners */  

    -moz-border-radius: 5px 5px 0px 0px;  
    -webkit-border-radius: 5px 5px 0px 0px;  
    border-radius: 5px 5px 0px 0px;  
}  

#menu li a {  
    font-family:Arial, Helvetica, sans-serif;  
    font-size:14px;  
    color: #EEEEEE;  
    display:block;  
    outline:0;  
    text-decoration:none;  
    text-shadow: 1px 1px 1px #000;  
}  

#menu li:hover a {  
    color:#161616;  
    text-shadow: 1px 1px 1px #FFFFFF;  
}  
#menu li .drop {  
    padding-right:21px;  
    background:url("img/drop.png") no-repeat rightright 8px;  
}  
#menu li:hover .drop {  
    background:url("img/drop.png") no-repeat rightright 7px;  
}  

/* Drop Down */  

.dropdown_1column,  
.dropdown_2columns,  
.dropdown_3columns,  
.dropdown_4columns,  
.dropdown_5columns {  
    margin:4px auto;  
    float:left;  
    position:absolute;  
    left:-999em; /* Hides the drop down */  
    text-align:left;  
    padding:10px 5px 10px 5px;  
    border:1px solid #777777;  
    border-top:none;  

    /* Gradient background */  
    background:#F4F4F4;  
    background: -moz-linear-gradient(top, #EEEEEE, #BBBBBB);  
    background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#EEEEEE), to(#BBBBBB));  

    /* Rounded Corners  
    -moz-border-radius: 0px 5px 5px 5px;  
    -webkit-border-radius: 0px 5px 5px 5px;  
    border-radius: 0px 5px 5px 5px; */  
}  

.dropdown_1column {width: 930px;}  
.dropdown_2columns {width: 931px;}  
.dropdown_3columns {width: 930px;}  
.dropdown_4columns {width: 932px;}  
.dropdown_5columns {width: 932px;}  

#menu li:hover .dropdown_1column
{
    left:-841px;
    top:auto;
}
#menu li:hover .dropdown_2columns
{
    left:-2px;
    top:auto;
} 
#menu li:hover .dropdown_3columns
{
    left:-736px;
    top:auto;
}
#menu li:hover .dropdown_4columns
{
    left:-248px;
    top:auto;
}  
#menu li:hover .dropdown_5columns {  
    left:-110px;  
    top:auto;  
}  

/* Columns */  

.col_1,  
.col_2,  
.col_3,  
.col_4,  
.col_5 {  
    display:inline;  
    float: left;  
    position: relative;  
    margin-left: 5px;  
    margin-right: 5px;  
}  
.col_1 {width:130px;}  
.col_2 {width:270px;}  
.col_3 {width:410px;}  
.col_4 {width:550px;}  
.col_5 {width:690px;}  

/* Right alignment */  

#menu .menu_right {  
    float:right;  
    margin-right:0px;  
}  
#menu li .align_right {  
    /* Rounded Corners */  
   /*-moz-border-radius: 5px 0px 5px 5px;  
    -webkit-border-radius: 5px 0px 5px 5px;  
    border-radius: 5px 0px 5px 5px;*/
}  
#menu li:hover .align_right {  
   /* left:auto;
    right:-1px;*/   
    top:auto;  
}  

/* Drop Down Content Stylings */  

#menu p, #menu h2, #menu h3, #menu ul li {  
    font-family:Arial, Helvetica, sans-serif;  
    line-height:21px;  
    font-size:12px;  
    text-align:left;  
    text-shadow: 1px 1px 1px #FFFFFF;  
}  
#menu h2 {  
    font-size:21px;  
    font-weight:400;  
    letter-spacing:-1px;  
    margin:7px 0 14px 0;  
    padding-bottom:14px;  
    border-bottom:1px solid #666666;  
}  
#menu h3 {  
    font-size:14px;  
    margin:7px 0 14px 0;  
    padding-bottom:7px;  
    border-bottom:1px solid #888888;  
}  
#menu p {  
    line-height:18px;  
    margin:0 0 10px 0;  
}  

#menu li:hover div a {  
    font-size:12px;  
    color:#015b86;  
}  
#menu li:hover div a:hover {  
    color:#029feb;  
}  
.strong {  
    font-weight:bold;  
}  
.italic {  
    font-style:italic;  
}  
#menu li ul {  
    list-style:none;  
    padding:0;  
    margin:0 0 12px 0;  
}  
#menu li ul li {  
    font-size:12px;  
    line-height:24px;  
    position:relative;  
    text-shadow: 1px 1px 1px #ffffff;  
    padding:0;  
    margin:0;  
    float:none;  
    text-align:left;  
    width:130px;  
}  
#menu li ul li:hover {  
    background:none;  
    border:none;  
    padding:0;  
    margin:0;  
}

我的导航现在看起来像这样

enter image description here

如上所示，如何让导航菜单下方的下拉列表具有固定位置？

2 个答案:

答案 0 :(得分：1)

#menu li:hover .dropdown_1column
{
    left:-841px;
    top:auto;
}
#menu li:hover .dropdown_2columns
{
    left:-841px;
    top:auto;
} 
#menu li:hover .dropdown_3columns
{
    left:-841px;
    top:auto;
}
#menu li:hover .dropdown_4columns
{
    left:-248px;
    top:auto;
}  
#menu li:hover .dropdown_5columns {  
    left:-841px;  
    top:auto;  
}

使左侧属性相等

答案 1 :(得分：0)

为 CSS 中的每个导航菜单添加margin-left属性。 

.dropdown_2columns {width: 931px;margin-left: 1px;}  
.dropdown_4columns {width: 932px;margin-left: 247px;}  
.dropdown_5columns {width: 932px;margin-left: 109px;}

此边距将根据每个菜单位置设置。

body, ul, li {  
    font-size:14px;  
    font-family:Arial, Helvetica, sans-serif;  
    line-height:21px;  
    text-align:left;  
}  
  
/* Navigation Bar */  
  
#menu {  
    list-style:none;  
    width:940px;  
    padding:0;
    margin:30px auto 0px auto;  
    height:43px;  
   /* padding:0px 20px 0px 20px;*/  
  
    /* Rounded Corners */  
  
    -moz-border-radius: 10px;  
    -webkit-border-radius: 10px;  
    border-radius: 10px;  
  
    /* Background color and gradients */  
  
    background: #014464;  
    background: -moz-linear-gradient(top, #0272a7, #013953);  
    background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#0272a7), to(#013953));  
  
    /* Borders */  
  
    border: 1px solid #002232;  
  
    -moz-box-shadow:inset 0px 0px 1px #edf9ff;  
    -webkit-box-shadow:inset 0px 0px 1px #edf9ff;  
    box-shadow:inset 0px 0px 1px #edf9ff;  
}  
  
#menu li {  
    float:left;  
    text-align:center;  
    position:relative;  
    padding: 4px 10px 4px 10px;  
    margin-right:30px;  
    margin-top:7px;  
    border:none;  
}  
  
#menu li:hover {  
    border: 1px solid #777777;  
    padding: 4px 9px 4px 9px;  
  
    /* Background color and gradients */  
  
    background: #F4F4F4;  
    background: -moz-linear-gradient(top, #F4F4F4, #EEEEEE);  
    background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#F4F4F4), to(#EEEEEE));  
  
    /* Rounded corners */  
  
    -moz-border-radius: 5px 5px 0px 0px;  
    -webkit-border-radius: 5px 5px 0px 0px;  
    border-radius: 5px 5px 0px 0px;  
}  
  
#menu li a {  
    font-family:Arial, Helvetica, sans-serif;  
    font-size:14px;  
    color: #EEEEEE;  
    display:block;  
    outline:0;  
    text-decoration:none;  
    text-shadow: 1px 1px 1px #000;  
}  
  
#menu li:hover a {  
    color:#161616;  
    text-shadow: 1px 1px 1px #FFFFFF;  
}  
#menu li .drop {  
    padding-right:21px;  
    background:url("img/drop.png") no-repeat rightright 8px;  
}  
#menu li:hover .drop {  
    background:url("img/drop.png") no-repeat rightright 7px;  
}  
  
/* Drop Down */  
  
.dropdown_1column,  
.dropdown_2columns,  
.dropdown_3columns,  
.dropdown_4columns,  
.dropdown_5columns {  
    margin:4px auto;  
    float:left; 
    
    position:absolute;  
    left:-999em; /* Hides the drop down */  
    text-align:left;  
    padding:10px 5px 10px 5px;  
    border:1px solid #777777;  
    border-top:none;  
  
    /* Gradient background */  
    background:#F4F4F4;  
    background: -moz-linear-gradient(top, #EEEEEE, #BBBBBB);  
    background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#EEEEEE), to(#BBBBBB));  
  
    /* Rounded Corners  
    -moz-border-radius: 0px 5px 5px 5px;  
    -webkit-border-radius: 0px 5px 5px 5px;  
    border-radius: 0px 5px 5px 5px; */  
}  
  

.dropdown_2columns {width: 931px;margin-left: 1px;}  
.dropdown_4columns {width: 932px;margin-left: 247px;}  
.dropdown_5columns {width: 932px;margin-left: 109.5px;}  
  
#menu li:hover .dropdown_1column
{
    left:-841px;
    top:auto;
}
#menu li:hover .dropdown_2columns
{
    left:-2px;
    top:auto;
} 
#menu li:hover .dropdown_3columns
{
    left:-736px;
    top:auto;
}
#menu li:hover .dropdown_4columns
{
    left:-248px;
    top:auto;
}  
#menu li:hover .dropdown_5columns {  
    left:-110px;  
    top:auto;  
}  
  
/* Columns */  
  
.col_1,  
.col_2,  
.col_3,  
.col_4,  
.col_5 {  
    display:inline;  
    float: left;  
    position: relative;  
    margin-left: 5px;  
    margin-right: 5px;  
}  
.col_1 {width:130px;}  
.col_2 {width:270px;}  
.col_3 {width:410px;}  
.col_4 {width:550px;}  
.col_5 {width:690px;}  
  
/* Right alignment */  
  
#menu .menu_right {  
    float:right;  
    margin-right:0px;  
}  
#menu li .align_right {  
    /* Rounded Corners */  
   /*-moz-border-radius: 5px 0px 5px 5px;  
    -webkit-border-radius: 5px 0px 5px 5px;  
    border-radius: 5px 0px 5px 5px;*/
}  
#menu li:hover .align_right {  
   /* left:auto;
    right:-1px;*/   
    top:auto;  
}  
  
/* Drop Down Content Stylings */  
  
#menu p, #menu h2, #menu h3, #menu ul li {  
    font-family:Arial, Helvetica, sans-serif;  
    line-height:21px;  
    font-size:12px;  
    text-align:left;  
    text-shadow: 1px 1px 1px #FFFFFF;  
}  
#menu h2 {  
    font-size:21px;  
    font-weight:400;  
    letter-spacing:-1px;  
    margin:7px 0 14px 0;  
    padding-bottom:14px;  
    border-bottom:1px solid #666666;  
}  
#menu h3 {  
    font-size:14px;  
    margin:7px 0 14px 0;  
    padding-bottom:7px;  
    border-bottom:1px solid #888888;  
}  
#menu p {  
    line-height:18px;  
    margin:0 0 10px 0;  
}  
  
#menu li:hover div a {  
    font-size:12px;  
    color:#015b86;  
}  
#menu li:hover div a:hover {  
    color:#029feb;  
}  
.strong {  
    font-weight:bold;  
}  
.italic {  
    font-style:italic;  
}  
.imgshadow {  
    background:#FFFFFF;  
    padding:4px;  
    border:1px solid #777777;  
    margin-top:5px;  
    -moz-box-shadow:0px 0px 5px #666666;  
    -webkit-box-shadow:0px 0px 5px #666666;  
    box-shadow:0px 0px 5px #666666;  
}  
.img_left { /* Image sticks to the left */  
    width:auto;  
    float:left;  
    margin:5px 15px 5px 5px;  
}  
#menu li .black_box {  
    background-color:#333333;  
    color: #eeeeee;  
    text-shadow: 1px 1px 1px #000;  
    padding:4px 6px 4px 6px;  
  
    /* Rounded Corners */  
    -moz-border-radius: 5px;  
    -webkit-border-radius: 5px;  
    border-radius: 5px;  
  
    /* Shadow */  
    -webkit-box-shadow:inset 0 0 3px #000000;  
    -moz-box-shadow:inset 0 0 3px #000000;  
    box-shadow:inset 0 0 3px #000000;  
}  
#menu li ul {  
    list-style:none;  
    padding:0;  
    margin:0 0 12px 0;  
}  
#menu li ul li {  
    font-size:12px;  
    line-height:24px;  
    position:relative;  
    text-shadow: 1px 1px 1px #ffffff;  
    padding:0;  
    margin:0;  
    float:none;  
    text-align:left;  
    width:130px;  
}  
#menu li ul li:hover {  
    background:none;  
    border:none;  
    padding:0;  
    margin:0;  
}  
#menu li .greybox li {  
    background:#F4F4F4;  
    border:1px solid #bbbbbb;  
    margin:0px 0px 4px 0px;  
    padding:4px 6px 4px 6px;  
    width:116px;  
  
    /* Rounded Corners */  
    -moz-border-radius: 5px;  
    -webkit-border-radius: 5px;  
    border-radius: 5px;  
}  
#menu li .greybox li:hover {  
    background:#ffffff;  
    border:1px solid #aaaaaa;  
    padding:4px 6px 4px 6px;  
    margin:0px 0px 4px 0px;  
}  
<ul id="menu">

    <li>
        <a href="#" class="drop">Home</a><!-- Begin Home Item -->

        <div class="dropdown_2columns">
            <!-- Begin 2 columns container -->

            <div class="col_2">
                <h2>Welcome !</h2>
            </div>


        </div><!-- End 2 columns container -->

    </li><!-- End Home Item -->

    <li>
        <a href="#" class="drop">5 Columns</a><!-- Begin 5 columns Item -->

        <div class="dropdown_5columns">
            <!-- Begin 5 columns container -->



        </div><!-- End 5 columns container -->

    </li><!-- End 5 columns Item -->

    <li>
        <a href="#" class="drop">4 Columns</a><!-- Begin 4 columns Item -->

        <div class="dropdown_4columns">
            <!-- Begin 4 columns container -->

            <div class="col_4">
                <h2>This is a heading title</h2>
            </div>


        </div><!-- End 4 columns container -->

    </li><!-- End 4 columns Item -->

</ul>

希望这会对你有所帮助!!

相关问题
最新问题