Question

首先，我是所有这一切的新手，一周前开始学习编码。我的导航栏没什么问题。我想将下拉菜单放在粘性导航栏中。这里是a link到html文件。我想把下拉菜单放在这些menu1，menu2 ...

下

另外，如果可能的话，我想将导航栏的宽度设置为与内容的宽度相同。提前致谢。 :)

Answer 1

要向导航栏添加下拉菜单，您只需使用＆＃34;选择＆＃34;标签和内部＆＃34;选择＆＃34;您将使用＆＃34;选项＆＃34;标签，您可以在其中插入下拉菜单的选项

from selenium import webdriver

stocks = ['RKN','MG','GTE','IMO','REI.UN','RY']
dt = []

url = 'https://app.tmxmoney.com/research/insidertradesummaries?locale=EN'

driver = webdriver.Firefox()
driver.get(url)

search = driver.find_element_by_xpath('//ul[@class="nav nav-pills"]/li[3]')
search.click()

stock_form = driver.find_element_by_name('text')

for stock in stocks:
    stock_form.clear()
    stock_form.send_keys(stock)
    stock_form.submit()
    data = driver.find_element_by_xpath('//div[@class="insider-trades-symbol-search-container"]/div[@class="ng-binding"]')
    a = data.text.split('\n')
    if len(a) > 1:
        dt.append(a[-1].split())
    else:
        dt.append([])

driver.close()

然后，如果您想设置导航栏的宽度，那么您将需要将导航栏插入＆＃34; Div＆＃34;标签。然后，您将分配一个ID div标签。

<select>
       <option>None</option>
       <option>Mr.</option>
       <option>Mrs.</option>
       <option>Miss.</option>       
</select>

然后你可以在CSS文件中使用上面指定的div id来调整宽度以上div的累积

希望这能解决你的问题。

Answer 2

https://jsfiddle.net/Liamm12/px0bt26o/4/

你好！这是你想要做的事情

HTML：

     <div class="header">
        <h2>fb</h2>

      </div>
            <div id="navbar">
<div class="menu-wrap">
    <nav class="menu">
        <ul class="clearfix">
            <li><a href="#">Home</a></li>
            <li>
                <a href="#">MENU1 <span class="arrow">&#9660;</span></a>

                <ul class="sub-menu">
                    <li><a href="#">Some Text here</a></li>
                    <li><a href="#">Whatever you want</a></li>
                    <li><a href="#">Some Text</a></li>
                    <li><a href="#">Hello &amp; There</a></li>
                </ul>
            </li>
            <li><a href="#">MENU2 <span class="arrow">&#9660;</span></a>

                <ul class="sub-menu">
                    <li><a href="#">Text Menu2</a></li>
                    <li><a href="#">Text Menu2</a></li>
                    <li><a href="#">Text Menu2</a></li>
                    <li><a href="#">Hello &amp; Menu2</a></li>
                </ul>


            </li>
            <li><a href="#">MENU3</a></li>
            <li><a href="#">MENU4</a></li>
            <li><a href="#">MENU5</a></li>
        </ul>
    </nav>
</div>
</div>

      <div class="content">
        <h3>Lorem Ipsum Bipsum Dipsum</h3>
        <p>Lorem torem borem dorem jorem sorem.</p>
        <p>Some text to enable scrolling.. Lorem ipsum dolor sit amet, illum definitiones no quo, maluisset concludaturque et eum, altera fabulas ut quo. Atqui causae gloriatur ius te, id agam omnis evertitur eum. Affert laboramus repudiandae nec et. Inciderint efficiantur his ad. Eum no molestiae voluptatibus.</p>
        <p>Some text to enable scrolling.. Lorem ipsum dolor sit amet, illum definitiones no quo, maluisset concludaturque et eum, altera fabulas ut quo. Atqui causae gloriatur ius te, id agam omnis evertitur eum. Affert laboramus repudiandae nec et. Inciderint efficiantur his ad. Eum no molestiae voluptatibus.</p>
        <p>Some text to enable scrolling.. Lorem ipsum dolor sit amet, illum definitiones no quo, maluisset concludaturque et eum, altera fabulas ut quo. Atqui causae gloriatur ius te, id agam omnis evertitur eum. Affert laboramus repudiandae nec et. Inciderint efficiantur his ad. Eum no molestiae voluptatibus.</p>
        <p>Some text to enable scrolling.. Lorem ipsum dolor sit amet, illum definitiones no quo, maluisset concludaturque et eum, altera fabulas ut quo. Atqui causae gloriatur ius te, id agam omnis evertitur eum. Affert laboramus repudiandae nec et. Inciderint efficiantur his ad. Eum no molestiae voluptatibus.</p>
        <p>Some text to enable scrolling.. Lorem ipsum dolor sit amet, illum definitiones no quo, maluisset concludaturque et eum, altera fabulas ut quo. Atqui causae gloriatur ius te, id agam omnis evertitur eum. Affert laboramus repudiandae nec et. Inciderint efficiantur his ad. Eum no molestiae voluptatibus.</p>
        <p>Some text to enable scrolling.. Lorem ipsum dolor sit amet, illum definitiones no quo, maluisset concludaturque et eum, altera fabulas ut quo. Atqui causae gloriatur ius te, id agam omnis evertitur eum. Affert laboramus repudiandae nec et. Inciderint efficiantur his ad. Eum no molestiae voluptatibus.</p>
        <p>Some text to enable scrolling.. Lorem ipsum dolor sit amet, illum definitiones no quo, maluisset concludaturque et eum, altera fabulas ut quo. Atqui causae gloriatur ius te, id agam omnis evertitur eum. Affert laboramus repudiandae nec et. Inciderint efficiantur his ad. Eum no molestiae voluptatibus.</p>
      </div>

CSS：

@font-face {
  font-family: Marat Sans;
  src: url(fonts/MaratSans.otf);
}

@font-face {
  font-family: Marat Sans;
  src: url(fonts/MaratSansthin.otf);
  font-weight: thin;
}

@font-face {
  font-family: Noe Display;
  src: url(fonts/NoeDisplayMedium.otf);
}

@font-face {
  font-family: Charter;
  src: url(fonts/charter.otf);
}

h3 {

  font-family: Marat Sans;
  font-size: 40px;
}

body {
    margin: 0;
    font-size: 22px;
    font-family: charter; 
     background: #fff;

  }

  .header {
    background-color: #f1f1f100;
    margin top: 0;
    padding: 0px;
    text-align: center;
    float: center;
    font-size: 24px;
font-family: Noe Display;
  }

.clearfix:after {
    display:block;
    clear:both;
}

.menu-wrap {
    width:100%;
    box-shadow:0px 1px 3px rgba(0,0,0,0.2);
    background:#3e3436;
}

.menu {
    width:1000px;
    margin:0px auto;
}

.menu li {
    margin:0px;
    list-style:none;
    font-family:'Ek Mukta';
}

.menu a {
    transition:all linear 0.15s;
    color: #000;
    text-decoration: none;
}


.menu .arrow {
    font-size:11px;
    line-height:0%;
}

.menu > ul > li {
    float:left;
    display:inline-block;
    position:relative;
        font-size: 16px;
    font-family: Marat Sans;
}

.menu > ul > li > a {
    padding:10px 40px;
    display:inline-block;
}

.menu li:hover > a, .menu .current-item > a {
    text-decoration:none;
    color:#17a67c;
}

.menu li:hover .sub-menu {
    z-index:1;
    display: block;
}

.sub-menu {
  display: none;
    width: 160%;
    padding: 5px 0px;
    position: absolute;
    top: 100%;
    left: 2px;
    z-index: -1;
    transition: opacity linear 0.15s;
    box-shadow: 0px 2px 3px rgba(0,0,0,0.2);
    background: #f5f5f5;
}

.sub-menu li {
    display:block;
    font-size:16px;
}

.sub-menu li a {
    padding:10px 30px;
    display:block;
}

.sub-menu li a:hover, .sub-menu .current-item a {
    background:#f5f5f5;
}
 .sticky {
    position: fixed;
    top: 0;
    width: 100%;
    background:#fff;
  }

  .sticky + .content {
    padding-top: 100px;
  }

粘性菜单上的下拉菜单？

2 个答案: