-4

HTML と CSS のみを使用してメニューのスタイルを設定したい<select>- どの部分をどのようにスタイル設定できますか?

画像をアップロードしようとしましたが、評価が 10 を下回っているためアップロードできません。

<div class="menu-style">
    <select class="dropdown" style="position: absolute; display:block; width:100%; padding: 10px 10px 10px 20px; opacity: 0;color: #fff;border: none; background: #9f4504;">
        <option>Project 2</option>
        <option>Project 3</option>
        <option>Project 4</option>
    </select>
    <div class="selected-item" style="display:block; font-weight: bold;color: #fff;padding: 10px 10px 10px 20px; width:100%;">Selected Project</div>
</div>
<ul class="nav-list" style="width: 100%; display: block; ">
    <li style="display: block;padding: 10px 10px 10px 20px;cursor: pointer;color: #fff;">Overview</li>
    <li style="display: block;padding: 10px 10px 10px 20px;cursor: pointer;color: #fff;">Reports</li>
    <li style="display: block;padding: 10px 10px 10px 20px;cursor: pointer;color: #fff;">Schedule</li>
    <li style="display: block;padding: 10px 10px 10px 20px;cursor: pointer;color: #fff;">Forms</li>
</ul>

また、いくつかのホバー要素が進行中です。

4

1 に答える 1

2

何かを試したり、検索したりしましたか?

真剣に...簡単な検索：http://bavotasan.com/2011/style-select-box-using-only-css/

これは一例ですが、Web 上には他にもたくさんあります。これで遊んでみましょう:

<select>
    <option>Here is the first option</option>
    <option>The second option</option>
</select>

select {
    background: transparent;
    width: 268px;
    padding: 5px;
    font-size: 16px;
    border: 1px solid #ccc;
    height: 34px;
}
于 2012-10-18T19:52:39.113 に答える